<template>
  <div class="center">
    <div class="statistics">
      <dv-border-box-11 :color="['#11caff']" backgroundColor="transparent" title="站点告警统计">
      <div class="search clearfix">
        <el-date-picker
          popper-class="test"
          v-model="date"
          value-format="yyyy-MM-dd"
          type="daterange"
          :clearable="true"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
        <el-select
          v-model="isOnline"
          :clearable="true"
          :filterable="true"
          placeholder="请选择告警状态"
          :style="{ width: '200px' }"
        >
          <el-option
            v-for="item in linestatus"
            :label="item.label"
            :key="item.index"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button type="primary" @click="getchart">查询</el-button>
      </div>
      <div class="echart" id="sitewarn"></div>
      </dv-border-box-11>
    </div>
    <div class="table_box clearfix">
      <dv-border-box-11 :color="['#11caff']" backgroundColor="transparent" title="站点通道最大温差告警统计" :titleWidth="300">
      <div class="sub clearfix" style="display: block">
        <el-date-picker
          popper-class="test"
          v-model="tableDate"
          value-format="yyyy-MM-dd"
          type="daterange"
          :clearable="true"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
        <el-select
          v-model="siteNo"
          :clearable="true"
          :filterable="true"
          placeholder="请选择站点"
          :style="{ width: '200px' }"
        >
          <el-option
            v-for="item in sitelist"
            :label="item.siteName"
            :key="item.index"
            :value="item.siteNo"
          >
          </el-option>
        </el-select>
        <el-input
          v-model="siteName"
          :clearable="true"
          placeholder="请输入站点名称"
          :style="{ width: '200px' }"
        ></el-input>
        <el-button type="primary" @click="getTable">查询</el-button>
      </div>
      <div class="table">
        <el-table
          :data="tableData"
          class="customer-table"
          height="360"
          :header-cell-style="headClass"
          @row-click="rowClick"
          style="width: 100%"
        >
          <template slot="empty">
            <div></div>
          </template>
          <el-table-column prop="siteNo" label="站点编号"> </el-table-column>
          <el-table-column prop="siteName" label="站点名称"> </el-table-column>
          <el-table-column prop="aisleNo" label="通道号"> </el-table-column>
          <el-table-column prop="diff" label="温差"> </el-table-column>
          <el-table-column prop="count" label="告警次数"> </el-table-column>
          <el-table-column label="首次告警时间">
            <template slot-scope="scope">
              {{ scope.row.createTime.substring(0, 10) }}
            </template>
          </el-table-column>
          <el-table-column label="最新告警时间">
            <template slot-scope="scope">
              {{ scope.row.updateTime.substring(0, 10) }}
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange"
          @prev-click="prevclick"
          @next-click="nextclick"
          :current-page="currentPage"
          :page-size="pagesize"
          layout="total,prev, pager, next"
          :total="total"
        >
        </el-pagination>
        <!-- <div class="asile-echart" v-show="loading">
          <dv-loading></dv-loading>
    </div> -->
      </div>
      <div class="date clearfix">
        <el-date-picker
          popper-class="test"
          v-if="show"
          @change="getcharge"
          v-model="timer"
          type="date"
          style="margin: 20px 0 20px 20px"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
        >
        </el-date-picker>
        <div class="title" v-if="show">
          {{ sitename }}
        </div>
        <div class="differ_chart" id="differ_chart"></div>
      </div>
      </dv-border-box-11>
    </div>
  </div>
  </div>
</template>
<script>
import momont from "moment";
import elementResizeDetectorMaker from "element-resize-detector";
export default {
  data() {
    return {
      date: "",
      tableDate: "",
      timer: "",
      isOnline: "",
      siteName: "",
      siteNo: "",
      sitenum: "",
      sitename: "",
      channel: "",
      currentPage: 1,
      pagesize: 10,
      total: 0,
      sitelist: [],
      tableData: [],
      show: false,
      linestatus: [
        {
          label: "全部",
          value: " ",
        },
        {
          label: "告警中",
          value: "warning",
        },
        {
          label: "已关闭",
          value: "closed",
        },
      ],
      $chart1: "",
      $chart2: "",
      $dom: "",
      start: 0,
      end: 30,
      datas: [],
      nameList: [],
      option: {
        backgroundColor: "transparent",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top: "15%",
          right: "3%",
          left: "5%",
          bottom: "15%",
        },
        dataZoom: [
          {
            type: "slider",
          },
        ],
        xAxis: [
          {
            type: "category",
            data: [],
            axisLine: {
              lineStyle: {
                color: "#133579",
              },
            },
            axisLabel: {
              show: true,
              margin: 10,
              interval: "auto",
              textStyle: {
                color: "#fff",
                fontSize: 12,
              },
            },
          },
        ],
        yAxis: [
          {
            axisLabel: {
              formatter: "{value}",
              color: "#e2e9ff",
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgba(255,255,255,1)",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(22, 43, 95, 1)",
              },
            },
            axisTick: {
              //y轴刻度线
              show: false,
            },
          },
        ],
        series: [
          {
            type: "bar",
            data: [],
            barWidth: "10px",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(0,244,255,1)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(0,77,167,1)", // 100% 处的颜色
                    },
                  ],
                  false
                ),
                barBorderRadius: [30, 30, 30, 30],
                shadowColor: "rgba(0,160,221,1)",
                shadowBlur: 4,
              },
            },
            label: {
              normal: {
                show: true,
                lineHeight: 20,
                width: 30,
                height: 20,
                backgroundColor: "rgba(0,160,221,0.1)",
                borderRadius: 200,
                position: ["-8", "-20"],
                distance: 1,
                formatter: ["    {d|}", " {a|{c}}     \n", "    {b|}"].join(
                  ","
                ),
                rich: {
                  d: {
                    color: "#3CDDCF",
                  },
                  a: {
                    color: "#fff",
                    align: "center",
                  },
                  b: {
                    borderColor: "#234e6c",
                    align: "left",
                  },
                },
              },
            },
          },
        ],
      },
      option1: {
        backgroundColor: "transparent",
        // color: [
        //   "grey",
        //   "gold",
        //   "darkviolet",
        //   "turquoise",
        //   "darkorange",
        //   "lightgreen",
        //   "plum",
        //   "tan",
        //   "khaki",
        //   "pink",
        //   "skyblue",
        //   "lawngreen",
        //   "salmon",
        //   "#FFC0CB",
        //   "#4B0082",
        //   "#00008B",
        //   "#F8F8FF",
        //   "#9370DB",
        //   "#DC143C",
        //   "#D8BFD8",
        // ],
        color: [
          "#FF0000",
          "#FFFFf0",
          "#0000F",
          "#008000",
          "#FF00FF",
          "#000080",
          "#008000",
          "#00FFFF",
          "#FFf000",
          "#993333",
          "#FFFF00",
          "#000099",
          "#000066",
          "#009933",
          "#F00000",
          "#FFCC00",
          "#0099FF",
          "#33CCCC",
          "#FFCCFF",
          "#33CC33",
          "#CC0000",
          "#3333CC",
          "#9900CC",
          "#993333",
          "#993333",
          "#006600",
          "#FF9900",
          "#00CCFF",
          "#66FF33",
          "#003300",
        ],

        legend: {
          width: "90%",
          left: 30,
          data: [
            "通道1",
            "通道2",
            "通道3",
            "通道4",
            "通道5",
            "通道6",
            "通道7",
            "通道8",
            "通道9",
            "通道10",
            "通道11",
            "通道12",
            "通道13",
            "通道14",
            "通道15",
            "通道16",
            "通道17",
            "通道18",
            "通道19",
            "通道20",
            "通道21",
            "通道22",
            "通道23",
            "通道24",
            "通道25",
            "通道26",
            "通道27",
            "通道28",
            "通道29",
            "通道30",
          ],
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(19,36,82,0.8)",
          padding: [20, 20],
          axisPointer: {
            lineStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0, 255, 233,0)",
                  },
                  {
                    offset: 0.5,
                    color: "rgba(255, 255, 255,1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(0, 255, 233,0)",
                  },
                ],
                global: false,
              },
            },
          },
        },
        grid: {
          top: "30%",
          left: "5%",
          right: "5%",
          bottom: "20%",
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#133579",
                width: 2,
              },
            },
            splitArea: {
              color: "#f00",
              lineStyle: {
                color: "#f00",
              },
            },
            axisLabel: {
              color: "#fff",
              show: true,
              interval: "auto",
            },
            splitLine: {
              show: false,
            },
            boundaryGap: false,
            data: [],
          },
        ],
        yAxis: [
          {
            type: "value",
            show: true,
            splitLine: {
              show: true,
              lineStyle: {
                color: "#11366e",
                type: "dashed",
              },
            },
            axisLine: {
              lineStyle: {
                width: 0,
              },
            },
            axisLabel: {
              show: true,
              margin: 20,
              textStyle: {
                color: "#d1e6eb",
              },
            },
            axisTick: {
              show: true,
            },
          },
        ],
        series: [],
      },
      series: [],
      mix: "",
      max: "",
    };
  },
  watch: {
    currentPage() {
      this.getTable();
    },
    show(newValue) {
      if (Boolean(newValue)) {
        var erd = elementResizeDetectorMaker(); //监听div宽度变化方法
        erd.listenTo(
          document.getElementById("differ_chart"),
          function (element) {
            this.$nextTick(function () {
              //使echarts尺寸重置
              this.$echarts
                .init(document.getElementById("differ_chart"))
                .resize();
            });
          }.bind(this)
        );
      }
    },
  },
  methods: {
    headClass() {
      return "background-color: #152f5b;color:#fff;font-weight:bold;";
    },
    //获取站点列表
    getsitelist() {
      let param = {
        provinceCode: "",
        cityCode: "",
        districtCode: "",
      };
      this.$http
        .post("/site/device/select", param)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.sitelist = res.data.b;
          }
        })
        .catch((err) => {});
    },
    getchart() {
      let params = {
        startTime: this.date[0] || "",
        endTime: this.date[1] || "",
        status: this.isOnline,
      };
      this.$http
        .post("/site/alarm/statistics/siteGroup", params)
        .then((res) => {
          if (res.data.h.code == 0) {
            let category = res.data.b;
            category.forEach((value) => {
              this.datas.push(value.count);
              this.nameList.push(value.siteName);
            });
            this.$chart1.setOption({
              dataZoom: [
                {
                  type: "slider",
                  startValue: 0,
                  endValue: 30,
                  zoomLock: true,
                  textStyle: { color: "#fff" },
                },
              ],
              xAxis: [
                {
                  data: this.nameList,
                },
              ],
              series: [
                {
                  data: this.datas,
                },
              ],
            });
          }
        });
    },
    getTable() {
      let data = {
        startTime: this.tableDate[0] || "",
        endTime: this.tableDate[1] || "",
        page: {
          pageNo: this.currentPage,
          pageSize: this.pagesize,
        },
        siteName: this.siteName,
        siteNo: this.siteNo,
      };
      this.$http.post("/site/alarm/siteAisle/diff/list", data).then((res) => {
        if (res.data.h.code == 0) {
          this.total = res.data.b.total;
          this.tableData = res.data.b.records;
        }
      });
    },
    getcharge(val) {
      let year = val.split("-")[0] || "";
      let month = val.split("-")[1] || "";
      let day = val.split("-")[2] || "";
      this.$http
        .get(`/redis/siteAisleDiff/${year}/${month}/${day}/${this.sitenum}`)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.series = [];
            // 取数组的最大值和最小值
            let bigarr = res.data.b.temps.join(",").split(",").filter(Boolean);
            this.max = Math.ceil(Math.max.apply({}, bigarr));
            this.min = Math.floor(Math.min.apply({}, bigarr));
            if (this.min >= 3.0) {
              this.min = 3.0 - 1;
            }
            if (this.max <= 3.0) {
              this.max = 3.0 + 1;
            }
            for (let n = 0; n < res.data.b.temps.length; n++) {
              this.series.push({
                name: "通道" + Number(n + 1),
                data: res.data.b.temps[n],
                type: "line",
                smooth: true,
                showAllSymbol: true,
                symbol: "circle",
              });
            }
            this.series.push({
              name: "一层",
              type: "line",
              data: [],
              symbolSize: 1,
              symbol: "circle",
              smooth: true,
              showSymbol: false,
              markLine: {
                label: {
                  position: "middle", //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
                  formatter: "",
                },
                data: [
                  {
                    lineStyle: {
                      //警戒线的样式  ，虚实  颜色
                      type: "solid",
                      color: "#FCB724",
                      width: 2,
                    },
                    yAxis: 3.0, //警戒线在y轴的坐标
                  },
                ],
              },
            });
            this.$chart2.setOption({
              dataZoom: [
                {
                  type: "slider",
                  startValue: 0,
                  endValue: 30,
                  zoomLock: true,
                  textStyle: { color: "#fff" },
                },
              ],
              xAxis: [
                {
                  data: res.data.b.times,
                },
              ],
              yAxis: [
                {
                  min: this.min,
                  max: this.max,
                },
              ],
              series: this.series,
            });
          }
        });
    },
    rowClick(row, column, event) {
      this.sitename = row.siteName;
      this.sitenum = row.siteNo;
      this.show = true;
      this.timer = row.updateTime.substring(0, 10);
      let year = this.timer.split("-")[0] || "";
      let month = this.timer.split("-")[1] || "";
      let day = this.timer.split("-")[2] || "";
      this.$chart2 = this.$echarts.init(
        document.getElementById("differ_chart")
      );
      this.$chart2.setOption(this.option1);
      this.$http
        .get(`/redis/siteAisleDiff/${year}/${month}/${day}/${row.siteNo}`)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.series = [];
            // 取数组的最大值和最小值
            let bigarr = res.data.b.temps.join(",").split(",").filter(Boolean);
            this.max = Math.ceil(Math.max.apply({}, bigarr));
            this.min = Math.floor(Math.min.apply({}, bigarr));
            if (this.min >= 3.0) {
              this.min = 3.0 - 1;
            }
            if (this.max <= 3.0) {
              this.max = 3.0 + 1;
            }
            for (let n = 0; n < res.data.b.temps.length; n++) {
              this.series.push({
                name: "通道" + Number(n + 1),
                data: res.data.b.temps[n],
                type: "line",
                smooth: true,
                showAllSymbol: true,
                symbol: "circle",
              });
            }
            this.series.push({
              name: "一层",
              type: "line",
              data: [],
              symbolSize: 1,
              symbol: "circle",
              smooth: true,
              showSymbol: false,
              markLine: {
                label: {
                  position: "middle", //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
                  formatter: "",
                },
                data: [
                  {
                    lineStyle: {
                      //警戒线的样式  ，虚实  颜色
                      type: "solid",
                      color: "#FCB724",
                      width: 2,
                    },
                    yAxis: 3.0, //警戒线在y轴的坐标
                  },
                ],
              },
            });
            this.$chart2.setOption({
              dataZoom: [
                {
                  type: "slider",
                  startValue: 0,
                  endValue: 30,
                  zoomLock: true,
                  textStyle: { color: "#fff" },
                },
              ],
              xAxis: [
                {
                  data: res.data.b.times,
                },
              ],
              yAxis: [
                {
                  min: this.min,
                  max: this.max,
                },
              ],
              series: this.series,
            });
          }
        });
    },
    init() {
      this.$dom = document.getElementById("sitewarn");
      this.$chart1 = this.$echarts.init(document.getElementById("sitewarn"));
      //this.$chart2 = this.$echarts.init(document.getElementById("sitewarn"));
    },
    initcake() {
      this.$chart1.setOption(this.option);
      //this.$chart2.setOption(this.option);
    },
    //上一页
    prevclick() {
      this.currentPage--;
    },
    //下一页
    nextclick() {
      this.currentPage++;
    },
    //分页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
  },
  mounted() {
    this.init();
    this.initcake();
    this.getsitelist();
    this.getchart();
    this.getTable();
    var erd = elementResizeDetectorMaker(); //监听div宽度变化方法
    erd.listenTo(
      document.getElementById("sitewarn"),
      function (element) {
        this.$nextTick(function () {
          //使echarts尺寸重置
          this.$echarts.init(document.getElementById("sitewarn")).resize();
        });
      }.bind(this)
    );
  },
};
</script>
<style scoped>
.search {
  padding-left: 20px;
  box-sizing: border-box;
  padding-left: 20px;
  box-sizing: border-box;
  display: inline-block;
}
.search .el-select {
  margin-left: 10px;
  margin-right: 10px;
}
.search .el-button {
  margin-bottom: 0;
}
.sub {
  margin-bottom: 20px;
}
.sub .el-select {
  margin-left: 10px;
  margin-right: 10px;
}
.sub .el-input {
  margin-right: 10px;
}
.sub .el-button--primary {
  background: transparent;
}
.echart {
  margin: 0 20px;
  box-sizing: border-box;
  height: 400px;
}
.table {
  display: inline-block;
  float: left;
  width: 40%;
  border: 1px solid rgba(19, 81, 156, 1);
}
.el-pagination {
  text-align: center;
  margin-top: 20px;
}
.date {
  height: 434px;
  display: inline-block;
  float: right;
  width: 59%;
  /* border: 1px solid rgba(19, 81, 156, 1); */
}
.title {
  display: inline-block;
  float: right;
  margin: 20px 20px 20px 0;
  height: 30px;
  line-height: 30px;
  color: #fff;
  border-right: 4px solid #b8deff;
  padding-right: 20px;
  box-sizing: border-box;
}
.data .el-input__inner {
  background: transparent;
}
.differ_chart {
  height: 350px;
}
.active {
  background-color: rgba(19, 81, 156, 1) !important;
  color: rgba(0, 255, 255, 1) !important;
}
</style>
<style>
.test {
  background-color: rgba(19, 81, 156, 1);
  color: #fff !important;
}
.test .el-date-picker__header-label {
  color: #fff !important;
}
.test .el-picker-panel__icon-btn {
  color: #fff !important;
}
.el-date-table th {
  color: #fff !important;
}
.el-range-input {
  background: transparent !important;
  color: #fff !important;
}
.el-time-panel {
  background-color: rgba(19, 81, 156, 1);
}
.el-time-spinner__item {
  color: #fff !important;
}
.el-time-spinner__item:hover {
  background-color: rgba(19, 81, 156, 1) !important;
  color: #b8deff !important;
}
.test .el-input__inner {
  background: transparent;
  color: #fff;
}
.el-input__inner {
  border: 1px solid rgba(19, 81, 156, 1);
  color: #fff;
  background: transparent;
}
.customer-table th {
  border: none;
}
.customer-table td,
.customer-table th.is-leaf {
  border: none;
}
</style>
